<!--
 * @Author: Lu junwen
 * @Date: 2022-03-13 18:14:37
 * @LastEditors: Lu junwen
 * @LastEditTime: 2022-05-20 02:54:44
 * @FilePath: \vue-shop-app-customer\src\views\Cart\Cart.vue
-->
<template>
  <div class="cart">
    <div class="head">
      <van-nav-bar title="购物车" />
    </div>
    <div class="my_cart" v-if="orderGoods.length != 0">
      <Card
        v-for="good in orderGoods"
        v-show="good.goods_number !=0"
        :key="good.goods_id"
        :good="good"
        :number="good.goods_number"
      ></Card>
    </div>
    <van-empty v-if="orderGoods.length == 0" description="购物车是空的哦，去添加自己喜欢的东西吧" />
    <div class="bottom">
      <van-submit-bar
        :price="total * 100"
        button-text="提交订单"
        @submit="onSubmit(total)"
        button-color="purple"
      />
    </div>
  </div>
</template>

<script>
import { mapActions, mapState, mapMutations, mapGetters } from "vuex";
import Card from '@/components/goodsCard.vue'
import { Toast } from 'vant';
export default {
  components: { Card },
  data() {
    return {
      total: 0
    }
  },
  computed: {
    ...mapState("order", ["orderGoods"]),
  },
  watch: {
    orderGoods: {
      handler(newVal, oldVal) {
        if (newVal.length == 0) {
          this.total = 0
        } else {
          this.total = 0
          newVal.forEach(element => {
            this.total += element.goods_price * element.goods_number
          });
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    onClickLeft() {
      this.$router.go(-1);
    },
    onSubmit(total) {
      if (this.orderGoods.length == 0) {
        Toast.fail('购物车为空！')
      } else {
        this.$router.push({
          path: "OrderConfirm",
          query: { total }
        })
      }
    }

  },
}
</script>

<style scoped>
.head {
  margin-bottom: 10px;
}
.bottom {
  position: fixed;
  bottom: 50px;
  width: 100%;
  height: 50px;
}
.bottom div {
  position: relative;
}
.my_cart {
  margin-bottom: 100px;
}
</style>